import React,{ Component } from "react";
import 'antd/dist/antd.css';
import { Input,Button,List } from 'antd'

class TodoListUI extends Component {

  render() {
    return (
        <div>
        <div>
         <Input  
          placeholder="Todo info" value={this.props.inputValue} 
          style={{ width: '300px',marginRight:'10px' }}
          onChange={ this.props.handleInputChange }
           />
          <Button type="primary" onClick={ this.props.handleOnclick }>primary</Button>
        </div>
        <List
            style={{
              marginTop: '10px',
              width: "300px"
            }}
            size="large"
            bordered
            dataSource={this.props.list}
            renderItem={(item,index) => <List.Item onClick={ (index) => {this.props.handleDelite(index)} }>
              {item}
            </List.Item>}
         />
      </div>
    )
  }
}

export default TodoListUI;